<template>
<div class="scrollview">
    <slot></slot>
    <div class="loadmore">
        <span class="loadmore-tips">
            {{loadEnd? '已经加载完毕':'正在加载中...'}}
        </span>
    </div>
</div>
</template>

<script>
export default {
    name:'scrollview',
    props:{
        readyToLoad:Boolean,
        isend:Boolean,
        dataList:Array
    },
    computed:{
        loadEnd(){
            return this.isend||this.dataList.length==0
        }
    },
    mounted(){
        window.addEventListener('scroll',this.onLoadPage.bind(this))
    },
    beforeDestroy(){
        window.removeEventListener('scroll',this.onLoadPage.bind(this))
    },
    activated(){
        window.addEventListener('scroll',this.onLoadPage.bind(this))//
    },
    deactivated(){
        window.removeEventListener('scroll',this.onLoadPage.bind(this))
    },
    methods:{
        onLoadPage(){
            let clientHeight=document.documentElement.clientHeight;
            let scrollHeight=document.body.scrollHeight;
            let scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            this.$emit('scroll',scrollTop);
            //实时获取滚动多少
            let proLoadDis=60;
            //判断页面滚动是否滚动到底部
            if((scrollTop+clientHeight)>=(scrollHeight-proLoadDis)){
                //560 1915
                //是否滚动到最后一页
                if(!this.loadEnd){
                    //判断在一个API请求未完成时不能触发第二次滚动到底部的回调
                    if(!this.readyToLoad){
                    return
                     }
                      //通知父组件触发滚动到底部事件
                this.$emit('loadCallback')
                }
            }
        }
    }
}
</script>
<style scoped>
.loadmore{
    width: 65%;
    margin: 20px auto;
    line-height: 20px;
    font-size:14px;
    text-align: center;
}
.loadmore-tips{
    display: inline-block;
    vertical-align: middle;
    color: #ababab;

}
</style>
